Layout Builder

🎓 Quick Start Tutorial

New here? Learn how to use the power tools in 3 minutes.

✏️ 1. How to use Live Editing

Edit text directly on the preview page like a Word document.

Click the green button "✏️ Enable Live Visual Edit" below.
Click anywhere on the right-side preview (text, headings, footer).
A black floating toolbar will appear near your cursor. Use it to change fonts, colors, or bold text.
Important: Click the button again (turns red) to Stop & Sync changes before saving.

📅 2. Using the Table Generator

Create complex data tables or card layouts easily.

Setup: Define Rows and Cols (e.g., 3x3).
Content: Enter text in the lists separated by commas.
Merging Cells: Use the format r1,c1-r2,c2 (e.g., 1,1-1,3 merges the top row).
Card Mode: Check "Card Layout Mode" to turn the table into a modern image grid.
Finally, click "Insert Table to Target" to see it.

✨ 3. Floating Decoration Images

Add stickers, badges, or anime characters that float over your layout.

Scroll down to "Floating Decoration Images".
Enter an Image URL or pick an icon (e.g., 📌) and click "Add".
Interact in Preview:
- 🖱️ Drag the image to move it anywhere.
- ↘️ Drag the corner (blue handle) to resize.
- 🔄 Drag the top handle (green dot) to rotate.

🧩 4. Using Component Library

Save your favorite snippets (Buttons, Cards) and reuse them anytime.

Save (Method A): Highlight HTML text in the editor, then click "💾 Save Selection".
Save (Method B): Right-click any element in the Preview area and select "💾 Save as Component".
Use: Drag the component card into the editor, or click "Insert".
Manage: Use Export/Import to backup your library to a JSON file.

Recovery System

Next autosave time: Waiting...

Set styles and structure, then click "Download Html" or "Generate HTML Code".

🏗️ Core Structure & Live Edit

✨ Auto-Beautify (One-Click)

Instantly apply professional styling preset to the entire layout.

☁️ Clean Minimal

⚫ Modern Bold

🌸 Soft Pastel

🌙 Cyber Dark

1. Layout Structure Mode:

2. Visual Editing:

Click to edit text directly in the preview.
Note: Settings panel won't auto-refresh preview while editing to prevent cursor loss.

🎨 Preset Layout

🎨 Color Theme Manager

Define a color palette and apply it to the entire site (Navbar, Buttons, Backgrounds, Text) with one click.

Primary (Nav/Btn):

Secondary (Hover/Link):

Background:

Text/Heading:

Theme Name:

Saved Themes (Click to Apply)

💾 Template Manager 2.0

Auto-versioning enabled. Save with the same name to create a new version.

Processing...

Save or load all settings, options, and all `textarea` content at once.

Visibility and Layout Controls

Show Navbar

Show Left Menu

Show Main Content

Show Right Sidebar

Show Footer

Show Device Preview Toolbar

💾 Enable Auto-save (Every 5 minutes)

Left Width (%):

Right Width (%):

Column Padding (px):

Column Border (px):

Box Shadow Template: Custom Box Shadow:

Advanced CSS Settings

Max Page Width (px):

Gap Between Columns (px):

Border Radius (px):

Line Height:

Heading Color:

Font and Text Settings

Select Base Font:

🌐 Google Fonts Integration 1. Quick Select (Popular): 2. Or Type Font Name (Exact name from fonts.google.com):

*Entering a value here will override the standard font selection above.

Font Size (px):

Font Weight:

Text Color:

Link Color:

Background Templates

Choose a preset background or enter a custom background URL (custom backgrounds will override the template).

Custom Background URL:

Background Color:

Gradient Overlay (optional):

Custom Gradient Code:

Left Bg:

Main Bg:

Right Bg:

Column Background Images (Optional)

Left Column Image URL:

Use Image for Left Column (overrides solid color/glass effect)

Main Column Image URL:

Use Image for Main Content (overrides solid color)

Right Column Image URL:

Use Image for Right Sidebar (overrides solid color)

Main Content 2 Image URL:

Use Image for Main Content 2

Main Content 3 Image URL:

Use Image for Main Content 3

Main Content 4 Image URL:

Use Image for Main Content 4

Main Content 5 Image URL:

Use Image for Main Content 5

Header Image Templates

Choose a template or enter a custom header URL.

Header Image Template

Custom Header Image URL:

Custom Header HTML (Override by Header Image if present):

Header Templates

Header Rotate (deg) / Scale

Header SkewX (deg) / Header SkewY

Header TranslateX / Header TranslateY

Header Mode / Position:

📱 Mobile/Tablet Specific Settings

These settings apply only when screen width is less than 700px.

Mobile Font Size (px):

Hide Left Sidebar on Mobile Hide Right Sidebar on Mobile

Hide Navbar on Mobile Put Main Content First (Reorder)

Mobile Container Padding (px): 📱 Hide images on mobile (optimized loading)

Customize Head content (including Leaflet)

Paste the <link> and <script> tags here, or anything else you want to add to the <head>.

Leaflet Example code (please copy and paste into the editor below):

<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

Custom Head Content Editor:

The content will be injected into the <head>block of the final HTML file.

Custom CSS Injection

Insert custom CSS rules. The content of this editor will be injected into the preview's <style> block after the layout and theme CSS. The content is saved automatically to your browser.

Custom JavaScript Injection

Insert custom JavaScript code. The code will be injected at the bottom of the body tag.

Navbar Theme & Behavior

Navbar Style Template: Scroll Behavior: Nav Bar Color: Nav Link Color:

Button Background: Button Hover:

Menu Setting on the Navbar

Tip: Drag the modal header to reposition. Within modal you can drag items to reorder parent and children.

表單生成器 (Form Builder)

Step 1: Click Add Component

文字框 (Input)

勾選框 (Checkbox)

下拉選單 (Select)

Insert target place:

Table Generator

Insert an HTML table into Main Content

Rows: Cols:

Border width (px): Cell padding (px):

Border color: Cell bg:

Merge cells (Format: r1c1-r2c2, r3c1-r3c2, ...):

Draggable columns/rows (Sortable enabled in preview area): (Requires advanced editing features) 3. "Image and text card layout" mode (using DIV/CSS Grid)

Form Style Presets:

Cell Text List (comma separated): Image URLs in Cells (use comma to separate): Hyperlink URLs in Cells (comma separated for link targets):

Show Text Auto-fit Images (Width 100%)

Use Hyperlink (disable Fancybox gallery)

Automatically synchronize preview area changes (Recommended to enable when drag-and-drop sorting is enabled)

Control whether the dragged/sorted results in the preview area are immediately written back to the "Table Content" input box on the left.

Image Alignment (Crop Ratio):

Selecting a ratio (e.g. Square) will crop images to align perfectly.

Image Width (px) (Ignored if Auto-fit is checked): Bold header row

Target Location:

Note: Inserting into Main 1 will override text mode. Inserting into Main 2/3 will overwrite the current editor content.

📊 Table Data I/O

Tip: Right-click on the table in preview for more options.

Iframe Generator

Insert an Iframe into Main Content Iframe Target: Iframe Name/Target: Iframe Source URL:

🧩 Widgets Generator

🎵 Music / Audio Player

Audio File URL (.mp3/.ogg):

Autoplay Loop

Player Style: Song Title (for Retro/Floating):

📬 Functional Contact Form

Generates a working form using Formspree (Free service).

Your Email / Form ID (Formspree):

Form Style:

📝 Form Widgets

Form Type: Formspree ID / Email: Form Style:

🎬 Video Player (MP4)

Video URL (.mp4): Poster Image (Optional):

Controls Autoplay (Muted) Loop

⏰ Utilities (Clock & Calendar)

Clock Style:

Calendar Style:

▶ YouTube Player

YouTube URL:

Autoplay (Mute) Loop Controls

Start (sec): End (sec):

🗺️ Interactive Map Widget

Method A: Post Code / Address Embed

Works on Neocities! No API Key needed.

Use this if you already know the exact Lat/Lon.

Search Coordinates:

(May be blocked by CORS on Neocities)

Coordinates (Lat / Lon)

Lat: Lon:

Zoom (1-18): 15 Popup Text:

💳 PayPal Payment Widget

Generate a Buy Now or Donate button.

PayPal Email or Merchant ID:

Item Name: Item ID (Opt):

Price: Currency:

Button Style:

📰 Blogging Tools

Post Title:

Author: Date:

Header Image URL (Optional): Post Excerpt / Intro:

Auto Read Time Add Share Links

Layout Style:

Target for Widgets:

📊 Dynamic JSON Content

Fetch data from an API and generate static HTML elements.

Data Source Type:

API URL:

Root Path (Optional):

✨ Icon Library

Click to open the gallery and insert an icon into the Main Content editor.

✍️ Enable title editing mode

Content Templates (One-Click Insert)

Click to insert a pre-built HTML template into the editor below.

Insert target:

🧩 My Component Library

Save your favorite HTML snippets (Buttons, Cards, Tables) and reuse them anytime.

No components saved yet. Select text in editor or right-click in preview to save.

Notion Block Palette

Text

Heading 1

Heading 2

Divider

2 Columns

3 Columns

🧩 Element Block Palette

Drag & Drop these blocks into the editor below, or Click to append.

Text

Heading

Button

Image

Card

Divider

Alert

List

Icon

Main Content HTML Editor

Enter custom HTML content for the Main Content area. This is the content used unless a Table or Iframe is inserted.

Left Sidebar Mode

Choose how the left sidebar should display.

Menu Mode
Custom Content Mode

Left Menu Editor

Drag to reorder. Each item supports a name and a link (URL). Items are saved automatically.

Left sidebar custom content editor

When you click "💾 Save Content", the sidebar mode will switch to "Custom Content". If you use the menu editor above, it will automatically switch back to "Menu Mode".

Right Sidebar Content Editor

Enter custom HTML content for the Right Sidebar. This will override the default content.

Input the HTML content you provided in the prompt here.

Extra Content Sections

These sections appear between the main column layout and the footer. Drag the handle (☰) to reorder them.

Footer Editor

Modify the footer content (HTML allowed)

Footer Templates

Fixed Screen Content (Text/Image)

Current Content Slot:

Position Type:

Enter Text or HTML (e.g., <img src="...">)

Position X (px/%) : Position Y (px/%) :

Anchor Position: Show Fixed Content

Fixed Content Slots Management

Upload 4 Slots Data File (.json):

Floating Decoration Images (Max 8)

Add small floating images anywhere on the page using absolute positioning.

Image URL: Link URL (optional):

Max 8 decorations allowed.

Decoration Active Control

Selected ID:

X (%) Y (%)

Width (px) [Shift + ← / →: Width in pixels ±2px] Rotate (deg) [Shift + ↑ / ↓: Rotation angle ±2deg]

Drag the decorative image in the preview on the right to directly synchronize coordinates; or enter values at the top and press Save.

🎬 Animation Builder

1. Select Target Element

2. Choose Animation

Duration (s): Delay (s):

👁️ Scroll Reveal (Trigger when visible)

Preview

🌊 Parallax Effect

Make element move slower/faster than scroll.

Speed (0=None, 0.5=Slow):

🎈 Lottie Animation (JSON)

Loop Autoplay

🌙 預覽內容黑夜模式 (Dark Mode Preview)

When enabled, the generated HTML will support a CSS variable-driven dark theme.

SEO / Meta Settings

Quickly edit page-level <head> tags used by the preview and by generated HTML files.

Page Title: Meta description: Meta keywords: Favicon URL:

OpenGraph / Twitter / Canonical / Robots

OG Title: OG Image (Thumbnail):

Recommended size: 1200x630 pixels.

OG Type: Twitter Card: Canonical URL: Robots:

These values will be injected into <head>, saved locally, and applied to preview + exported HTML.

These fields are saved locally to your browser. They will be injected into the preview and into the generated HTML head.

⚡ All settings management

🚀 Pro Extensions

📄 Multi-Page Manager

Switching pages saves the current state automatically.

🐢 Enable Image Lazy Load

Automatically adds loading="lazy" to all images for better performance.

☁️ Cloud Backup

📦 Project Manager

Save Current Project As:

Load Saved Project:

🔗 Share / Sync

Generates a URL containing your current layout. Send it to friends or open it on another device to restore this state.

Please back up your settings regularly!

Visual Page Builder Editor